<template>
    <div class="large-map-com-box">
        <div class="map-box">
            <div class="title">
                <div>统计数据</div>
            </div>
            <div class="china" ref="china"></div>
            <div class="total-count">727403</div>
        </div>
    </div>
</template>

<script>
import * as echarts from 'echarts'
export default {
    data() {
        return {
        }
    },
    mounted() {
        let myChart = echarts.init(this.$refs.china)
        let option;
        option = {
            tooltip: {
                trigger: 'item'
            },
            //左侧小导航图标
            visualMap: {
                show: false,
                x: 'left',
                y: 'center',
                splitList: [
                    { start: 1, end: 500 }, { start: 500, end: 1000 },
                    { start: 1000, end: 1500 }, { start: 1500, end: 2000 },
                    { start: 2000, end: 2500 }, { start: 2500, },
                ],
                color: [
                    '#102a43',  // 最暗蓝色
                    '#26466d',
                    '#3c6297',
                    '#527ec1',
                    '#689aeb',
                    '#7eb6ff'   // 最亮蓝色
                ],
                textStyle: {
                    color: '#black'
                }
            },
            geo: {
                map: 'china',
                aspectScale: 0.75,
                layoutCenter: ["50%", "50%"], //地图位置
                layoutSize: '100%',
                roam: false, //关闭缩放
                itemStyle: {
                    normal: {
                        borderColor: 'rgba(147, 235, 248, 1)',
                        borderWidth: 0.5,
                        color: {
                            type: 'linear-gradient',
                            x: 0,
                            y: 1500,
                            x2: 2500,
                            y2: 0,
                            colorStops: [{
                                offset: 0,
                                color: '#009DA1' // 0% 处的颜色

                            }, {
                                offset: 1,
                                color: '#005B9E' // 50% 处的颜色

                            }],
                            global: true // 缺省为 false

                        },
                        opacity: 0.5,
                    },
                    emphasis: {
                        areaColor: '#2a333d'
                    }
                },
                regions: [{
                    name: '南海诸岛',
                    itemStyle: {
                        areaColor: 'rgba(0, 10, 52, 1)',
                        borderColor: 'rgba(0, 10, 52, 1)'
                    },
                    emphasis: {
                        areaColor: 'rgba(0, 10, 52, 1)',
                        borderColor: 'rgba(0, 10, 52, 1)'
                    }
                }],
                z: 2
            },
            series: [{
                name: '',
                type: 'map',
                map: 'china',
                label: {
                    show: false,
                    color: 'black',
                    fontSize: 14
                },
                aspectScale: 0.75,
                layoutCenter: ["50%", "50%"], //地图位置
                layoutSize: '100%',
                roam: false, //关闭缩放
                itemStyle: {
                    normal: {
                        borderColor: 'rgba(147, 235, 248, 0.6)',
                        borderWidth: 0.8,
                        areaColor: {
                            type: 'linear-gradient',
                            x: 0,
                            y: 1200,
                            x2: 1000,
                            y2: 0,
                            colorStops: [{
                                offset: 0,
                                color: '#009DA1' // 0% 处的颜色
                            }, {
                                offset: 1,
                                color: '#005B9E' // 50% 处的颜色
                            }],
                            global: true // 缺省为 false
                        },
                    },
                    emphasis: {
                        areaColor: 'rgba(147, 235, 248, 0)',
                        color: '#fff'
                    }
                },
                zlevel: 1,
                data: [
                    { name: '北京', value: 2450 },
                    { name: '天津', value: 1870 },
                    { name: '河北', value: 2150 },
                    { name: '山西', value: 1620 },
                    { name: '内蒙古', value: 1340 },
                    { name: '辽宁', value: 1980 },
                    { name: '吉林', value: 1260 },
                    { name: '黑龙江', value: 1430 },
                    { name: '上海', value: 2350 },
                    { name: '江苏', value: 2480 },
                    { name: '浙江', value: 2420 },
                    { name: '安徽', value: 1750 },
                    { name: '福建', value: 1920 },
                    { name: '江西', value: 1560 },
                    { name: '山东', value: 2380 },
                    { name: '河南', value: 2100 },
                    { name: '湖北', value: 1950 },
                    { name: '湖南', value: 1830 },
                    { name: '广东', value: 2490 },
                    { name: '广西', value: 1680 },
                    { name: '海南', value: 980 },
                    { name: '重庆', value: 1420 },
                    { name: '四川', value: 2050 },
                    { name: '贵州', value: 1180 },
                    { name: '云南', value: 1530 },
                    { name: '西藏', value: 650 },
                    { name: '陕西', value: 1720 },
                    { name: '甘肃', value: 1090 },
                    { name: '青海', value: 720 },
                    { name: '宁夏', value: 860 },
                    { name: '新疆', value: 1350 },
                    { name: '台湾', value: 2200 },
                    { name: '香港', value: 2150 },
                    { name: '澳门', value: 1980 }
                ]
            }],
        };
        //地图点击事件,根据点击某个省份计算出这个省份的数据
        myChart.on('click', (params) => {
            console.log(params);

        });
        myChart.setOption(option);
    }
}
</script>


<style lang="less" scoped>
* {
    color: white;
}

.large-map-com-box {
    width: 600px;
    height: 600px;
    background: url('@/assets/image/screen-border.png');
    background-size: 100% 100%;
}

.map-box {
    position: relative;
    width: 550px;
    height: 550px;
    margin: 0 auto;
    margin-top: 10px;
    background-image: url('@/assets/image/map-border.png');
    background-size: 100% 100%;
}

.title {
    width: 100%;
    z-index: 100;
    background-image: url(@/assets/image/title-bg.png);
    >div {
        width: 70px;
        margin: 0 auto;
        font-size: 16px;
    }
}

.china {
    width: calc(100% - 40px);
    height: 600px;
    margin: 20px;
}

.total-count {
    color: #1df7f6;
    margin: 0 auto;
    font-size: 25px;
    position: absolute;
    left: 235px;
    top: 40px;
}
</style>
